<template>
    <div class="bx">
        <el-steps :active="state" align-center finish-status="success">
            <el-step title="提交订单" description="2018-09-13 16:57:40" />
            <el-step title="支付订单" description="2018-10-13 13:44:04" />
            <el-step title="平台发货" description="2018-10-16 13:43:41" />
            <el-step title="确认收货" description="" />
            <el-step title="完成评价" description="" />
        </el-steps>
        <div class="add-area">
            <div class="row">
                <div class="add-left">
                    <el-icon color="red" size="13">
                        <WarningFilled />
                    </el-icon>
                    <span>当前订单状态:
                        <span style="margin-left: 2px;"> {{ orderState(state) }}</span>
                    </span>
                </div>
                <div class="add-right">
                    <div v-if="state === 4">
                        <el-button size="small" @click="delOrder">删除订单</el-button>
                        <el-button size="small" @click="updateNoteTracking = true">备注订单</el-button>

                    </div>
                    <div v-if="state !== 4">
                        <el-button size="small" @click="showOrderTracking = true">订单跟踪</el-button>
                        <el-button size="small" @click="sendOutInformationTracking = true">发送站内信</el-button>
                        <el-button size="small" @click="updateNoteTracking = true">备注订单</el-button>
                    </div>

                </div>
            </div>
            <div class="basicInfo">
                <p class="orderDetailTitle">
                    <el-icon>
                        <Briefcase />
                    </el-icon>
                    基本信息
                </p>
                <essentialInformation :tableData="tableData" />
            </div>
            <div class="basicInfo">
                <p class="orderDetailTitle">
                    <el-icon>
                        <Briefcase />
                    </el-icon>
                    收货人信息
                </p>
                <consigneeInformation :tableData="tableData" />
            </div>
            <div class="basicInfo">
                <p class="orderDetailTitle">
                    <el-icon>
                        <Briefcase />
                    </el-icon>
                    商品信息
                </p>
                <el-table :data="orderItemList" border header-align="right" header-cell-class-name="center"
                    cell-class-name="center" empty-text="暂无数据">
                    <el-table-column prop="" label="商品图片" />
                    <el-table-column prop="" label="商品名称" />
                    <el-table-column prop="" label="价格/货号" />
                    <el-table-column prop="" label="属性" />
                    <el-table-column prop="" label="数量" />
                    <el-table-column prop="" label="小计" />
                </el-table>
                <p class="productInformationTotal">
                    合计：<span style="color: red;">{{ "￥"+ totalAmount }}</span>
                </p>
            </div>
            <div class="basicInfo">
                <p class="orderDetailTitle">
                    <el-icon>
                        <Briefcase />
                    </el-icon>
                    费用信息
                </p>
                <expenseInformation :tableData="tableData" />

            </div>
            <div class="basicInfo">
                <p class="orderDetailTitle">
                    <el-icon>
                        <Briefcase />
                    </el-icon>
                    操作信息
                </p>
                <productInformation :tableData="operationInformation" />
            </div>
        </div>
    </div>
    <el-dialog v-model="showOrderTracking" title="订单跟踪" width="30%">
        <orderTracking />
    </el-dialog>
    <el-dialog v-model="updateNoteTracking" title="备注订单" width="30%">
        <el-input v-model="updateNoteTextarea" :rows="4" type="textarea" placeholder="操作备注" />
        <template #footer>
            <el-button @click="updateNoteTracking = false">取消</el-button>
            <el-button type="primary" @click="updateNote">确认</el-button>
        </template>
    </el-dialog>
    <el-dialog v-model="sendOutInformationTracking" title="发送站内信息" width="30%">
        <el-input v-model="sentOutTitle" :rows="2" type="textarea" placeholder="标题" />
        <el-input v-model="sentOutMessage" :rows="4" type="textarea" placeholder="内容" />
        <template #footer>
            <el-button @click="sendOutInformationTracking = false">取消</el-button>
            <el-button type="primary" @click="sentOutInformation">确认</el-button>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { WarningFilled, Briefcase } from '@element-plus/icons-vue'
import { reactive, ref } from "vue"
import { getOrderDetailsAPI, orderOperationDelAPI, updateNoteAPI } from "./api"
import { useRoute, useRouter } from "vue-router"
import { orderState, orderSource } from "@/utils/orderStates"
import essentialInformation from "./components/essentialInformation.vue"
import orderTracking from './components/orderTracking.vue'
import expenseInformation from './components/expenseInformation.vue'
import consigneeInformation from "./components/consigneeInformation.vue"
import productInformation from "./components/productInformation.vue"
import { ElMessage, ElMessageBox } from 'element-plus'
const route = useRoute()
const router = useRouter()
const state = ref<number>(0)
let tableData = reactive<IOrderDetailsModel[]>([])
// 操作信息
let operationInformation = ref<IOrderDetailsHistoryList[]>([])
// 商品信息
let orderItemList = ref<any[]>([])
let totalAmount = ref<number>(0)
getOrderDetailsAPI(parseInt(route.query.id as string)).then(res => {
    if (res.code === 200) {
        tableData.push(res.data)
        state.value = res.data.status
        totalAmount.value = res.data.totalAmount
        res.data.historyList.forEach(item => {
            operationInformation.value.push(item)
        })
        res.data.orderItemList.forEach(item => {

            orderItemList.value.push(item)
        })

    }
})
// 跟踪订单
const showOrderTracking = ref<boolean>(false)
// 备注订单
const updateNoteTracking = ref<boolean>(false)
const updateNoteTextarea = ref('')

// 删除订单
const delOrder = () => {
    ElMessageBox.confirm("是否删除该订单?", "删除订单", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
    }).then(() => {
        // 这个报错先别管
        orderOperationDelAPI([route.query.id]).then(res => {
            if (res.code === 200) {
                ElMessage.success("删除成功")
                router.push("order")
            }
        })
    })
}
// 备注订单
const updateNote = () => {
    ElMessageBox.confirm("是否要备注订单?", "备注订单", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
    }).then(() => {
        updateNoteAPI(parseInt(route.query.id as string), updateNoteTextarea.value, state.value).then(res => {
            if (res.code === 200) {
                ElMessage.success("订单备注成功")
                updateNoteTextarea.value = ""
            }
        })
    })

}
// 发送站内信息
const sentOutTitle = ref("")
const sentOutMessage = ref("")
const sendOutInformationTracking = ref<boolean>(false)
const sentOutInformation = () => {
    ElMessageBox.confirm("是否发送此信息?", "发送站内信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
    }).then(() => {
        ElMessage.success("发送成功")
        sentOutTitle.value = ""
        sentOutMessage.value = ""
        sendOutInformationTracking.value = false
    })
}
</script>

<style lang="less" scoped>
.bx {
    width: 1200px;
    margin: 20px auto;
}

:deep(.center) {
    .cell {
        text-align: center !important;
    }
}

.add-area {
    border: 1px solid #ebeef5;
    border-radius: 5px;
    margin-top: 15px;

    .row {
        padding: 20px;
        height: 80px;
        box-sizing: border-box;
        border-radius: 1px;
        background: rgb(242, 246, 252);
        display: flex;
        align-items: center;

        span {
            color: red
        }

        &:first-child {
            justify-content: space-between;
        }
    }

    .basicInfo {
        padding: 0 20px;
        margin-bottom: 20px;

        .orderDetailTitle {
            display: flex;
            align-items: center;
            margin: 20px 0;
        }

        .productInformationTotal {
            text-align: right;
            margin: 20px;
        }

        :deep(.el-tooltip__trigger) {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
        }
    }
}
</style>